# Minimal Svelte Starter Kit

This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb application.

# Prerequisites

• Know typescript
• NodeJS v18 or greater
• Know Svelte - https://svelte.devopen in new window
• Know git and common terminal commands

# Development Dependencies

• TypeScript
• esbuild
• w3
• yarn npm i -g yarn

# Steps

# Create Project

mkdir myproject
cd myproject
yarn init -y
yarn add -D svelte esbuild typescript esbuild-svelte tinro svelte-preprocess

# Create buildscript.js

import fs from "fs";
import esbuild from "esbuild";
import esbuildSvelte from "esbuild-svelte";
import sveltePreprocess from "svelte-preprocess";

//make sure the directoy exists before stuff gets put into it
if (!fs.existsSync("./dist/")) {
	fs.mkdirSync("./dist/");
}
esbuild
	.build({
		entryPoints: [`./src/main.ts`],
		bundle: true,
		outdir: `./dist`,
		mainFields: ["svelte", "browser", "module", "main"],
		// logLevel: `info`,
		splitting: true,
		write: true,
		format: `esm`,
		plugins: [
			esbuildSvelte({
				preprocess: sveltePreprocess(),
			}),
		],
	})
	.catch((error, location) => {
		console.warn(`Errors: `, error, location);
		process.exit(1);
	});

//use a basic html file to test with
fs.copyFileSync("./index.html", "./dist/index.html");

# Modify package.json

Set type to module Add a build cripts

{
  "type": "module"
  ...
  "scripts": {
    "build": "node buildscript.js"
  }
}

# Create src directory and some src files

mkdir src
touch src/main.ts
touch src/app.svelte
touch src/counter.svelte
touch src/about.svelte

# Main.ts

import App from "./app.svelte";

new App({
	target: document.body,
});

# app.svelte

<script lang="ts">
	import { Route, router } from "tinro";
	import Counter from "./counter.svelte";
	import About from "./about.svelte";

	// add hash routing for permaweb support
	router.mode.hash();
</script>
<nav><a href="/">Home</a> | <a href="/about">About</a></nav>
<Route path="/"><Counter /></Route>
<Route path="/about"><About /></Route>

# counter.svelte

<script lang="ts">
	let count = 0;

	function inc() {
		count += 1;
	}
</script>
<h1>Hello Permaweb</h1>
<button on:click="{inc}">Inc</button>
<p>Count: {count}</p>

# about.svelte

<h1>About Page</h1>
<p>Minimal About Page</p>
<a href="/">Home</a>

# Deploy

# Generate Wallet

yarn add -D arweave
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json

# install Irys

yarn add -D @irys/sdk

# update package.json

{
  ...
  "scripts": {
    ...
    "deploy": "irys upload-dir dist -h https://node2.irys.xyz --wallet ./wallet.json -c arweave --index-file index.html --no-confirmation"
  }
}

# Run deploy

yarn deploy

# Repository

A completed version of this example is available here: https://github.com/twilson63/permaweb-minimal-svelte-starteropen in new window

# Summary

This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out hypar for a turnkey starter kit. HypARopen in new window